<template>
  <div id="detail">
         <detailsnavbar class="nav"  @currentnavbar= "currentnavbaritem" ref="nav"></detailsnavbar>
         
    <bscroll class="content" ref="scroll" :probetype= '3'  @scroll= "currentposioton">
    <detailswiper :iddimage = 'iddimage'></detailswiper>
    <detailbaseinfo :goods = 'goods'></detailbaseinfo>
    <detail-shop-info :shop= "shop"></detail-shop-info>
    <detail-goods-info :detail-info= 'detailinfo'></detail-goods-info>
    <detail-item-params :itemParams= 'detailparamsinfo' ref="params"></detail-item-params>
    <detail-comment-info :commentInfo= "commentInfo" ref="comment"></detail-comment-info>
    <homegoods :good = 'recommends' ref="recommend"></homegoods>
    </bscroll>
     <backtop @click.native= "backtopclick" v-show= "showbacktop"></backtop>
    <detailbottom @addCart = 'bottomclick'></detailbottom>  
       
  </div>
</template>

<script>
import detailsnavbar from './childComps/detailsNavbar.vue'
import backtop from '../../src/components/common/BackTop/backtop.vue'
import detailswiper from './childComps/detailswiper/detailswiper.vue'
import detailbaseinfo from './childComps/detailbaseinfo.vue'
import detailShopInfo from './childComps/detailshopimfo.vue'
import DetailGoodsInfo from './childComps/detailGoodsinfo.vue'
import detailItemParams from './childComps/detailItemParams.vue'
import detailbottom from './childComps/detailbottom.vue'
import DetailCommentInfo from './childComps/detailCommentInfo.vue'
import homegoods from '../../src/components/content/goods/Homegoods.vue'
import {getdetaildata,Goods,Shop,Params,getrecommend} from '../../network/detail';
import {debouce} from '../../src/components/common/utils';
import {mapActions} from 'vuex'

import bscroll from '@/components/common/BScroll/bscroll.vue'



export default {
    name:'detail',
    data () {
        return {
            iid: null,
            iddimage:[],
            goods:{},
            shop:{},
            detailinfo:{},
            detailparamsinfo:{},
            commentInfo:{},
            recommends:[],
            themeTopYs:[0],
             bcFuncTheme: null,
             currentindex:0,
             showbacktop:false,
             tabshow:false,
             tabTop:0,
        }
    },
    components: {
      detailsnavbar,
      detailswiper,
      detailbaseinfo,
      detailShopInfo,
      DetailGoodsInfo,
      detailItemParams,
      detailbottom,
      DetailCommentInfo,
      homegoods,
      backtop,
      bscroll
    },
  created () {

        this.iid = this.$route.params.iid

        getdetaildata(this.iid).then(res=>{
          // console.log(res);
            const data = res.result
            this.iddimage = data.itemInfo.topImages
            this.detailinfo = data.detailInfo
            this.goods = new Goods(data.itemInfo,data.columns,data.shopInfo.services)
            this.shop = new Shop(data.shopInfo)
            this.detailparamsinfo = new Params(data.itemParams.info, data.itemParams.rule)
             if(data.rate.Crate !== 0) {
            this.commentInfo = data.rate.list[0]
           }
        },0)

        getrecommend().then(res=>{
          this.recommends = res.data.list
        },0)     

       
            this.bcFuncTheme = debouce(() => {
              
          this.themeTopYs=[]
     this.themeTopYs.push(0)
      this.themeTopYs.push(this.$refs.params.$el.offsetTop-44);
      this.themeTopYs.push(this.$refs.comment.$el.offsetTop-44);
      this.themeTopYs.push(this.$refs.recommend.$el.offsetTop-44);
      this.themeTopYs.push(Number.MAX_VALUE)
 
    }, 100);
        
  }, 
       mounted () {

       },
    methods: {
      ...mapActions(['addCart']),
      currentnavbaritem(index){
        this.$refs.scroll.scroll.scrollTo(0,-this.themeTopYs[index],200)
      },
     currentposioton(position){
              this.bcFuncTheme();
      //  if (this.currentindex != this.themeTopYs[index]
      this.showbacktop = (-position.y) > 1000
        this.tabshow = (-position.y) > this.tabTop
       const positionY = (-position.y)
            //  console.log(positionY);
       for (let i=0; i < this.themeTopYs.length;i++){
        //  if(this.currentindex !==i && ((i<this.themeTopYs.length-1 && positionY>this.themeTopYs[i] && positionY<this.themeTopYs[(i+1)]) ||
        //  (i===this.themeTopYs.length-1 && positionY>this.themeTopYs[i]))){
        //  this.currentindex = i
        // this.$refs.nav.currentindex = this.currentindex
        //  }
        if(this.currentindex !==i && (i<this.themeTopYs.length-1 && positionY>this.themeTopYs[i-1])){
          this.currentindex = i
          this.$refs.nav.currentindex = this.currentindex
        } 
       }
      },
        backtopclick(){
        this.$refs.scroll.scroll.scrollTo(0,0,500)
      },
      bottomclick(){
         const product = {}
            product.iid = this.iid;
            product.image = this.iddimage[0];
            product.title = this.goods.title;
            product.desc = this.goods.desc;
            product.price = this.goods.realPrice;   
            
             this.addCart(product).then(res => {
        // console.log(res);
        this.$toast.show(res, 2000);
      })

          // this.$store.dispatch('addCart',product).then(res=>{
          //   console.log(res);
          // })   
      }
    }
}
</script>

<style scoped>
#detail {
    height: 100vh;
    position: relative;
   
    z-index: 10;
    background-color: #fff;
}

.content {
    /* position: absolute;
    top: 44px;
    bottom: 60px;
    right: 0; */
    position: relative;
    height: calc(100% - 44px - 58px);
    overflow: hidden;
  }




</style>